<template>
  <div class="app-container">
    <div class="filterDiv">
      <label class="label">期间</label>
      <PeriodList :start="listQuery.periodCode1" :end="listQuery.periodCode2" />
      <label class="label ml10">凭证字</label>
      <el-select v-model="listQuery.jeCatogeryId" placeholder="凭证字" size="small">
        <el-option v-for="item in catogeryList" :key="item.id" :label="item.catogeryName" :value="item.id" />
      </el-select>
      <label class="label ml10">科目级次</label>
      <el-select v-model="listQuery.coaLevel1" placeholder="科目级次" size="small">
        <el-option v-for="item in [1,2,3,4,5,6,7,8]" :key="item" :label="item" :value="item" />
      </el-select>
      <span class="zhi">至</span>
      <el-select v-model="listQuery.coaLevel2" placeholder="科目级次" size="small">
        <el-option v-for="item in [1,2,3,4,5,6,7,8]" :key="item" :label="item" :value="item" />
      </el-select>
      <el-button size="small" type="primary" round @click="getList">查询</el-button>
      <el-button-group style="float:right;margin-top:5px">
        <el-button v-permiss="['344010']" type="primary" size="small" round title="打印" @click="printBook">打印</el-button>
        <el-button v-permiss="['344020']" type="primary" size="small" round title="导出" @click="exportBook">导出</el-button>
      </el-button-group>
    </div>
    <div class="contentDiv">
      <el-table :key="tableKey" v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%;" size="small">
        <el-empty slot="empty" :image-size="120" />
        <el-table-column label="科目编码">
          <template slot-scope="{row}">
            <span class="tlink" @click="$router.push('/accbook/subsidiary?t1=' + listQuery.periodCode1 + '&t2=' + listQuery.periodCode2 + '&coa='+row.coaCode)">{{ row.coaCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="科目名称" min-width="100">
          <template slot-scope="{row}">
            <span v-html="row.pageCoaName" />
          </template>
        </el-table-column>
        <el-table-column label="方向" align="center">
          <template slot-scope="{row}">
            <span>{{ row.crDrStr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="期初余额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.beginBalance | Fixed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="借方金额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.accountedCr | Fixed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="贷方金额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.accountedDr | Fixed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="期末余额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.endBalance | Fixed }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getVoucherTotal, exportVoucherTotal, printVoucherTotal, getCatogery } from '@/api/accbook'
import { getNowMonth } from '@/utils/index'
import PeriodList from '@/components/voucher/periodList'
export default {
  name: 'VoucherTable',
  components: { PeriodList },
  filters: {
    Fixed(str) {
      return parseFloat(str).toFixed(2)
    }
  },
  data() {
    return {
      startDateOptions: null,
      endDateOptions: null,
      tableKey: 0,
      tableData: [],
      catogeryList: [],
      listLoading: true,
      listQuery: {
        periodCode1: getNowMonth(),
        periodCode2: getNowMonth(),
        jeCatogeryId: '',
        coaLevel1: 1,
        coaLevel2: 8
      }
    }
  },
  created() {
    getCatogery().then((res) => {
      this.catogeryList = res.data.data
      this.listQuery.jeCatogeryId = res.data.data[0].id
      this.getList()
    })
  },
  methods: {
    changeVal(obj) {
      for (const key in obj) {
        this.$set(this.listQuery, key, obj[key])
      }
    },
    getList() {
      this.listLoading = true
      getVoucherTotal(this.listQuery).then((res) => {
        this.listLoading = false
        this.tableData = res.data.data
      }).catch(() => {
        this.listLoading = false
      })
    },
    exportBook() {
      exportVoucherTotal(this.listQuery)
    },
    printBook() {
      printVoucherTotal(this.listQuery).then((res) => {
        if (res.data.errorCode === '0' && res.data.data) {
          window.open('http://' + window.location.host + res.data.data)
        }
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>
<style scoped>
.label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 5px 0 0;
}

.ml10 {
  margin-left: 10px;
}
</style>
